<script setup>
import { computed, ref } from 'vue';
import Button from './Button.vue';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

//获取路由参数
// const id = ref(route.query.id);
const id = computed(() => {
    return route.query.id;
});

//切换路由参数
const changeRouteQuery = (e)=>{
    router.push({path:'/wallmessage',query:{id:e} })
}


</script>

<template>
    <div class="top-bar">
        <div class="logo">
            <img src="../assets/images/logo-yike.png" alt="一刻" class="img-logo" />
            <p class="text-logo">一刻时光</p>
        </div>
        <div class="menu">
            <Button :nom="id ==='0' ? 'cprimary':'csecondary'" class="menu-message" @click="changeRouteQuery(0)">留言墙</Button>
            <Button :nom="id !=='0' ? 'cprimary':'csecondary'"  class="menu-photo" @click="changeRouteQuery(1)">照片墙</Button>
        </div>
        <div class="user">
            <div class="user-head">
    
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.top-bar {
width: 100%;
height: 52px;
background:rgba(255,255,255,0.80);
box-shadow:0px 0px 16px 0px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
position:fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    .img-logo{
    width: 32px;
    height: 32px;
    margin-right: 10px;
    margin-left: 10px;
    }
    .text-logo {
        font-size: 20px;
        color: @gray-1;
        letter-spacing: 0;
        text-align: justify;
        font-weight: 600;
    }

}
.user {
    width: 200px;

    .user-head {
        float: right;
        margin-right: 10px;
        border-radius: 50%;
        height: 36px;
        width: 36px;
        background-image: linear-gradient(180deg, #7BE7FF 2%, #1E85E2)
       }
    }
.menu{
    display: flex;
    .menu-message{
        margin-right: 24px;
    }
}

</style>